<template>
  <div>
    <CommonContainer :title="`${needCreditReview==1?'免':''}信审结果`">
      <div>
        <el-descriptions>
          <template v-if="needCreditReview==2">
            <el-descriptions-item label="信审批复结果">{{ results.creditReviewResult|creditSuggestionApproval }}</el-descriptions-item>
            <el-descriptions-item label="审核人">{{ results.auditPerson|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="审核时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
          </template>
          <template v-else>
            <el-descriptions-item label="价审通过时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
          </template>
        </el-descriptions>

        <el-form label-width="120px">
          <div style="margin-bottom: 20px">
            <div class="flex-row-center">
              <span class="quota">信审额度:</span>
              <template v-if="results.displayType==1||results.displayType==2">
                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                <el-button v-if="results.displayType==1&&checkPermi(['letterReview:letterReview:voidRemindCredit'])" type="text" @click="voidRemainingBalance">作废剩余额度
                </el-button>
              </template>
              <template v-else>
                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                <template v-if="results.displayType==3">
                  <span style="font-size: 14px;color: #8C8C8C">操作人:</span>
                  <span class="date" v-if="cancleOrderInfo">{{ cancleOrderInfo.invalidOperator|filterNull }}</span>
                  <el-button type="text" @click="goVoidRemainingBalanceInfo">查看作废说明</el-button>
                </template>
              </template>
            </div>

            <div class="table-title-wrap flex-row-center" style="margin-top: 10px">
              <p class="statisticInfo">申请总台数: <span>{{ results.totalApplicationNumber }}</span></p>
              <p class="statisticInfo">通过总台数: <span>{{ results.totalPassNumber }}</span></p>
              <p class="statisticInfo">拒绝总台数: <span>{{ results.totalRejectNumber }}</span></p>
            </div>

            <el-table
                :data="results.cars"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
              <el-table-column
                  align="center"
                  prop="vehicleManufacturers"
                  label="车辆厂商"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleModel"
                  label="车辆车型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleStyle"
                  label="车辆款型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="carNo"
                  label="车牌号"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleEnergyType"
                  label="车辆能源类型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="registrationNature"
                  label="登记性质"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="applicationType"
                  label="申请类型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="leaseTerm"
                  label="租赁期限(月)"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="rentPaymentMethod"
                  label="租金支付方式"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="mileageLimit"
                  label="里程限制（公里)"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="registeredCity"
                  label="上牌城市"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="registrationFee"
                  label="上牌费"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="insurancePremium"
                  label="保险费"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="maintenancePremium"
                  label="维保费"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="purchaseTax"
                  label="购置税"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleAndVesselTax"
                  label="车船税"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="installationCost"
                  label="加装费用"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="otherExpenses"
                  label="其他费用"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="irr"
                  label="IRR（含牌照）"
                  min-width="120">
                <template v-slot="{row}">
                  <template v-if="row.irr">{{ row.irr }}%</template>
                  <template v-else>--</template>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="margin"
                  label="保证金"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="monthlyRent"
                  label="每期租金"
                  min-width="120">
              </el-table-column>
              <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                <template v-slot="{row}">
                  <template v-if="row.firstInstallmentRentalRatio">
                    {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                  </template>
                  <template v-else>
                    -- 、--
                  </template>

                </template>
              </el-table-column>
              <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                <template v-slot="{row}">
                  <template v-if="row.residualValueRatio">
                    {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                  </template>
                  <template v-else>
                    -- 、--
                  </template>

                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="suggestedPrice"
                  label="厂商指导价"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="purchasePrice"
                  label="新车采购单价"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="currentValuation"
                  label="旧车当前估值"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfApplications"
                  label="申请台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfUnitsPassed"
                  label="通过台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="rejectedUnits"
                  label="拒绝台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfUnitsUsed"
                  label="已使用台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfInvalidUnits"
                  label="作废台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfFrozenUnits"
                  label="冻结台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfFrozenUnits"
                  label="剩余可用台数"
                  min-width="120">
                <template v-slot="{row}">
                  <span>{{ row.numberOfUnitsPassed - row.numberOfUnitsUsed - row.numberOfInvalidUnits - row.numberOfFrozenUnits }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="effectiveStatus"
                  label="通过台数状态"
                  min-width="120">
                <template v-slot="{row}">
                  <span>{{ row.effectiveStatus == 1 ? '生效中' : '已过期' }}</span>
                </template>
              </el-table-column>


            </el-table>
          </div>

          <template v-if="needCreditReview==2">
            <el-form-item label="说明:" prop="remark">
              {{ results.remark|filterNull }}
            </el-form-item>
            <el-form-item label="附件:" class="form-img" style="margin-top: 40px">
              <image-common disabled v-model="results.annex" :up-type="2"></image-common>
            </el-form-item>
          </template>
        </el-form>

      </div>
    </CommonContainer>
    <void-remaining-balance ref="voidRemainingBalance"></void-remaining-balance>
    <void-remaining-balance-info v-if="cancleOrderInfo" ref="voidRemainingBalanceInfo" :cancle-order-info="cancleOrderInfo"></void-remaining-balance-info>
  </div>
</template>

<script>
import VoidRemainingBalance from "@/views/letterReview/letterReview/components/VoidRemainingBalance.vue";
import VoidRemainingBalanceInfo from "@/views/letterReview/letterReview/components/VoidRemainingBalanceInfo.vue";
import {checkPermi} from "@/utils/permission";

export default {
  components: {
    VoidRemainingBalance,
    VoidRemainingBalanceInfo
  },
  props: {
    results: {
      type: Object,
      default: () => {
        return {}
      }
    },
    needCreditReview: {
      type: Number,
      default: 1
    },
    cancleOrderInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    applicationNo: {
      type: String,
      default: ''
    },
  },
  data() {
    // 这里存放数据
    return {}
  },
  // 方法集合
  methods: {
    checkPermi,
    voidRemainingBalance() {
      this.$refs.voidRemainingBalance.show(this.applicationNo)
    },
    goVoidRemainingBalanceInfo() {
      this.$refs.voidRemainingBalanceInfo.show()
    }
  },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884FF;
  }
}

.quota {
  font-size: 14px;
  color: #8C8C8C;
  position: relative;
  left: 12px;
}

.date {
  font-size: 14px;
  margin: 0 20px;
}
</style>
